<!-- 投诉/商务合作通用组件 -->
<template>
	<view class="enter">

		<view class="box">
			<view class="bg">
			</view>
			<view class="content">
				<view class="item">
					<view>姓名</view>
					<u--input placeholder="请输入姓名" v-model.trim="dto.realName" border="none" inputAlign="right" maxlength='10'></u--input>
				</view>
				<view class="item">
					<view>联系方式</view>
					<u--input placeholder="请输入手机号" v-model.trim="dto.phone" border="none" inputAlign="right">
					</u--input>
				</view>

				<view class="item">
					<view>合作类型</view>
					<view class="right" @click="showType = true">
						<text class="type" v-if="dto.copywritingType == ''">请选择</text>
						<text v-else class="type black">{{dto.copywritingType}}</text>
						<image class="img" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img7.png"></image>
					</view>
				</view>
				<view class="items">
					<view class="title">合作内容</view>
					<u--textarea confirmType="done" v-model="dto.content" placeholder="请输入" maxlength="200" autoHeight
						count class="text"></u--textarea>
				</view>
				<view class="submit" @click="submit">提交</view>

			</view>
		</view>

		<!-- 类型选择 -->
		<u-picker title="合作类型" :show="showType" :columns="columns" @cancel="showType = false" @confirm='confirm'
			:itemHeight="100"></u-picker>

		<success-pop :show="show" text="提交成功"></success-pop>
	</view>
</template>

<script>
	import {
		submitCooperation
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue';
	import successPop from '@/components/successPopup.vue'
	export default {
		components: {
			Header,
			successPop
		},
		data() {
			return {
				showType: false,
				show: false,
				columns: [
					['广告合作', '推广代理', '见面洽谈']
				],
				dto: {
					"memberId": null,
					"realName": "",
					"phone": "",
					"copywritingType": "",
					"content": "",
				},
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			confirm(e) {
				console.log(e)
				this.dto.copywritingType = e.value[0]
				this.showType = false;
			},
			submit() {
				const memberId = uni.getStorageSync('USER_DATA').memberId
				this.dto.memberId = memberId
				const boo = this.validation()
				if (boo) {
					submitCooperation(this.dto).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.show = true
							setTimeout(() => {
								this.show = false
								uni.navigateBack()
							}, 1500)
						}
					})
				}
			},
			// 校验
			validation() {
				const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.dto.realName) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.dto.phone) {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none'
					})
					return
				}
				if (!reg.test(this.dto.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (!this.dto.copywritingType) {
					uni.showToast({
						title: '请选择合作类型',
						icon: 'none'
					})
					return
				}
				if (!this.dto.content) {
					uni.showToast({
						title: '请填写合作内容',
						icon: 'none'
					})
					return
				}
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.enter {
		background-color: #F4F6F8;

	.box {
		position: relative;
		width: 100%;
		.bg {
			height: 156rpx;
			background-color: #194FC9;
			border-radius: 0 0 30rpx 30rpx;
		}
	}
	
	.content {
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 0 36rpx 64rpx;

			.submit {
				width: 636rpx;
				height: 90rpx;
				background: #194FC9;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				margin-top: 120rpx;
			}
            .items{
            	padding: 56rpx 14rpx;
            	width: 100%;
            	font-size: 30rpx;
            	font-family: PingFang SC;
            	font-weight: 500;
            	color: #1A1A1A;
            	&>.title {
            		margin-bottom:44rpx;
            	}
            	.text {
            		background-color: #F8F8F8;
            		// width: 100%;
            		// height: 238rpx;
            	}
            }
			.item {
				padding: 56rpx 14rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F1F1F1;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;

				.right {
					text-align: right;

					.type {
						color: #c0c4cc;
						margin-right: 16rpx;
					}

					.black {
						color: black;
					}
				}

				view {
					width: 50%;
				}

				.img {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.description {
				display: contents;

				&>.title {
					margin: 56rpx 0 44rpx;
				}

				.text {
					background-color: #F8F8F8;
					width: 100%;
					height: 238rpx;
				}
			}
		}
	}
</style>
